﻿<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
    <link href="favicon.png" rel="icon" />
	<title>登录界面</title>
	<!--必要样式--><link href="plugins/ShowMessage/iview.css" rel="stylesheet" />
	<link href="css/loginstyles.css" rel="stylesheet" type="text/css" />
   
</head>

<body>
    <form class="form-signin" action="Handlers/LoginHandler.ashx" method="post">
        <div class='login'>
            <div class='login_title'>
                <span id="CustomerLogin" class="SpanLogin SLactive">用户登录</span>
                <span id="AdminLogin" class="SpanLogin">管理员登录</span>
                <div id="Line"></div>
            </div>
            <div class='login_fields'>
                <div class='login_fields__user'>
                    <div class='icon'>
                        <img alt="" src='images/loginimg/user_icon_copy.png' />
                    </div>
                    <input name="login" placeholder='用户名/手机号' maxlength="16" type='text' autocomplete="off" value="18857510000" />
                    <div class='validation'>
                        <img alt="" src='images/loginimg/tick.png' />
                    </div>
                </div>
                <div class='login_fields__password'>
                    <div class='icon'>
                        <img alt="" src='images/loginimg/lock_icon_copy.png' />
                    </div>
                    <input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off" value="cool" />
                    <div class='validation'>
                        <img alt="" src='images/loginimg/tick.png' />
                    </div>
                </div>
                <input  type="text" name="checkcode" id="checkcode" class="form-control" placeholder="验证码" required>
                <img id="CCode" src="handlers/CheckCode.ashx" alt=""  title='看不清楚，双击图片换一张。' ondblclick="this.src = 'handlers/CheckCode.ashx?flag=' + Math.random()" border="1" />


                <div class='login_fields__submit'>
                    <input id="Sub" type='button' value='登录' />
                    <input id="hint" type='button' value='注册' />
                </div>
            </div>
            <!--<div class='disclaimer'>
                <p>欢迎登陆。。。</p>
            </div>-->
        </div>
    </form>
        <script type="text/javascript" src="plugins/jquery/dist/jquery.min.js"></script>
        <!--<script src="js/Particleground.js" type="text/javascript"></script>-->
        <script src="plugins/ShowMessage/message.js"></script>
        <script type="text/javascript">
            $('input[name="pwd"]').attr('type', 'password');
            $(document).keypress(function (e) {
                // 回车键事件
                if (e.which == 13) {
                    $('#Sub').click();
                }
            });
            $("#AdminLogin").click(function () {
                //$("#Line").css("float", "right");
                $("#Line").css("right", "-62%");
                $("#CustomerLogin").removeClass("SLactive");
                $(this).addClass("SLactive");
                $("input[name='login']").val("admin");
                $("input[name='pwd']").val("");
                //$("#hint").attr("disabled", "disabled");

            })
            $("#CustomerLogin").click(function () {
                $("#Line").css("right", "3%");
                $("#AdminLogin").removeClass("SLactive");
                $(this).addClass("SLactive");
                $("input[name='login']").val("18857510000");
                $("input[name='pwd']").val("");
                //$("#hint").removeAttr("disabled");

            })
            ////粒子背景特效
            //$('body').particleground({
            //    dotColor: '#E8DFE8',
            //    lineColor: '#ff5858'
            //});
            $('input[name="pwd"]').focus(function () {
                $(this).attr('type', 'password');
            });
            $('input[type="text"]').focus(function () {
                $(this).prev().animate({
                    'opacity': '1'
                }, 200);
            });
            $('input[type="text"],input[type="password"]').blur(function () {
                $(this).prev().animate({
                    'opacity': '.5'
                }, 200);
            });
            $('input[name="login"],input[name="pwd"]').keyup(function () {
                var Len = $(this).val().length;
                if (!$(this).val() == '' && Len >= 3) {
                    $(this).next().animate({
                        'opacity': '1',
                        'right': '30'
                    }, 200);
                } else {
                    $(this).next().animate({
                        'opacity': '0',
                        'right': '20'
                    }, 200);
                }
            });
            $('#hint').click(function (e) {
                //message("info", "默认账号:18857518492<br/>默认密码:cool", 6000);
                window.location.href = "Register.aspx";

            })
            $('#Sub').click(function (e) {
                var login = $('input[name="login"]').val();
                var pwd = $('input[name="pwd"]').val();
                var code = $('input[name="checkcode"]').val();
                if (login == '') {
                    message("error", "请输入您的账号", 2000,e);
                } else if (pwd == '') {
                    message("error", "请输入您的密码", 2000,e);
                } else if (code == '') {
                    message("error", "请输入验证码", 2000, e);
                } else {
                    var AC = "customer";
                    if ($("#AdminLogin").hasClass("SLactive"))
                        AC = "admin";
                    //认证中..
                    $('.login').addClass('test'); //倾斜特效
                    setTimeout(function () {
                        $('.login').addClass('testtwo'); //平移特效
                    }, 300);
                    $.post("Handlers/LoginHandler.ashx", { tel: login, pwd: pwd ,checkcode:code,type:AC}, function (data) {
                        if (data == "ToCustomer")
                        {
                            window.location.href = "index.aspx";
                        }
                        else if(data == "ToAdmin")
                        {
                            window.location.href = "Admin/Tocustomers.aspx";
                        }
                        else {
                            setTimeout(function () {
                                $('.login').removeClass('testtwo'); //xx平移特效
                            }, 1000);
                            setTimeout(function () {
                                $('.login').removeClass('test'); //xx倾斜特效
                            }, 1500);
                            if (data == "userIdError")
                            setTimeout(function () {
                                message("error", "账号错误", 3000);
                            }, 1500);
                            else if (data == "userPwdError") {
                                setTimeout(function () {
                                    message("error", "密码错误", 3000);
                                }, 1500);
                            }
                            else if (data == "errorcode") {
                                setTimeout(function () {
                                    message("error", "验证码错误", 3000);
                                }, 1500);
                            }
                            else
                                setTimeout(function () {
                                    message("error", "登录失败", 3000);
                                }, 1500);
                        }
                    })
                }
            })
        </script>
</body>

</html>
